<template>

  <el-tabs type="border-card" @tab-remove="removeTab" :closable="true">
    <el-tab-pane :label="content">
  <el-container>
<!--    <el-header>-->
<!--      <el-header class="auto"><goback :content="content"></goback></el-header>-->
<!--    </el-header>-->
    <el-main>
      <fieldset class="layui-elem-field">
        <legend class="legend">项目基本信息</legend>
        <el-form v-model="baseinfo">
          <el-row>
            <el-col :span="12">
              <el-form-item label="客户名称"><el-input v-model="baseinfo.customer" disabled class="input90"></el-input></el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目名称"><el-input v-model="baseinfo.name" disabled class="input90"></el-input></el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="项目编号"><el-input v-model="baseinfo.batch_id" disabled class="input90"></el-input></el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="公司简称"><el-input v-model="baseinfo.company" disabled class="input80"></el-input></el-form-item>
            </el-col>
            <el-col :span="6"><el-form-item label="公司简称"><el-input v-model="baseinfo.dept" disabled class="input80"></el-input></el-form-item></el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="立项时间"><el-input v-model="baseinfo.created_at" disabled class="input90"></el-input></el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="负责人员"><el-input v-model="baseinfo.leader" disabled class="input80"></el-input></el-form-item>
            </el-col>
            <el-col :span="6"><el-form-item label="联系方式"><el-input v-model="baseinfo.leader_mobile" disabled class="input80"></el-input></el-form-item></el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="项目币种"><el-input v-model="baseinfo.currency" disabled class="input90"></el-input></el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目城市"><el-input v-model="baseinfo.city" disabled class="input90"></el-input></el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item label="立项金额"><el-input v-model="baseinfo.lxmoney" disabled class="input80"></el-input></el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="立项成本"><el-input v-model="baseinfo.lxcost" disabled class="input80"></el-input></el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="立项开始"><el-input v-model="baseinfo.start" disabled class="input80"></el-input></el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="立项结束"><el-input v-model="baseinfo.stop" disabled class="input80"></el-input></el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item label="预算金额"><el-input v-model="baseinfo.ysmoney" disabled class="input80"></el-input></el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预算成本"><el-input v-model="baseinfo.yscost" disabled class="input80"></el-input></el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预算开始"><el-input v-model="baseinfo.ysstart" disabled class="input80"></el-input></el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预算结束"><el-input v-model="baseinfo.ysstop" disabled class="input80"></el-input></el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item label="结算金额"><el-input v-model="baseinfo.jsmoney" disabled class="input80"></el-input></el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="结算成本"><el-input v-model="baseinfo.jscost" disabled class="input80"></el-input></el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="结算开始"><el-input v-model="baseinfo.jsstart" disabled class="input80"></el-input></el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="结算结束"><el-input v-model="baseinfo.jsstop" disabled class="input80"></el-input></el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="备注信息"><el-input type="textarea" show-word-limit class="input95" maxlength="1500" v-model="baseinfo.desc" disabled></el-input></el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </fieldset>


      <fieldset class="layui-elem-field">
        <legend class="legend">项目合计信息</legend>
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item title="合计" name="1">
            <el-table :data="summaryTotal">
              <el-table-column label="财务合计" prop="financeTotal"></el-table-column>
              <el-table-column label="行政合计" prop="adminTotal"></el-table-column>
              <el-table-column label="税" prop="taxTotal"></el-table-column>
              <el-table-column label="项目收入" prop="incomeTotal"></el-table-column>
              <el-table-column label="项目支出" prop="outcomeTotal"></el-table-column>
              <el-table-column label="成本合计" prop="costTotal"></el-table-column>
              <el-table-column label="项目总金额" prop="offerTotal"></el-table-column>
              <el-table-column label="项目利润金额" prop="profitTotal"></el-table-column>
              <el-table-column label="项目利润率" prop="rateTotal"></el-table-column>
            </el-table>
          </el-collapse-item>

          <el-collapse-item name="2">

              <template slot="title">
                <el-badge :value="financeRaw" class="item">
                  财务分项合计
                </el-badge>
              </template>

                <el-table :data="financeList" show-summary :summary-method="getSummaries">
                  <el-table-column label="流水号" prop="batch_id"></el-table-column>
                  <el-table-column label="申请类型" prop="type"></el-table-column>
                  <el-table-column label="名称" prop="title"></el-table-column>
                  <el-table-column label="金额" prop="money"></el-table-column>
                  <el-table-column label="备注" prop="desc"></el-table-column>
                  <el-table-column label="创建人" prop="username"></el-table-column>
                  <el-table-column label="创建时间" prop="created_at"></el-table-column>
                </el-table>
          </el-collapse-item>

          <el-collapse-item name="2">
            <template slot="title">
              <el-badge :value="adminRaw" class="item">
                行政分项合计
              </el-badge>
            </template>
            <el-table :data="adminList" show-summary :summary-method="getSummaries">
              <el-table-column label="申请类型" prop="type"></el-table-column>
              <el-table-column label="名称" prop="title"></el-table-column>
              <el-table-column label="金额" prop="money"></el-table-column>
              <el-table-column label="备注" prop="desc"></el-table-column>
              <el-table-column label="创建人" prop="username"></el-table-column>
              <el-table-column label="创建时间" prop="created_at"></el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </fieldset>
    </el-main>
    <el-footer>

      <fieldset class="layui-elem-field">
        <legend class="legend">项目开票信息</legend>
        <el-table :data="fpList" show-summary :summary-method="getSummaries">
          <el-table-column label="流水号" prop="batch_id"></el-table-column>
          <el-table-column label="发票类别" prop="ticket_category"></el-table-column>
          <el-table-column label="发票类型" prop="ticket_type"></el-table-column>
          <el-table-column label="名称" prop="title"></el-table-column>
          <el-table-column label="金额" prop="money"></el-table-column>
          <el-table-column label="备注" prop="desc"></el-table-column>
          <el-table-column label="创建人" prop="username"></el-table-column>
          <el-table-column label="创建时间" prop="created_at"></el-table-column>

        </el-table>
      </fieldset>

      <fieldset class="layui-elem-field">
        <legend class="legend">项目收款信息</legend>
        <el-table :data="skList" show-summary :summary-method="getSummaries">
          <el-table-column label="流水号" prop="batch_id"></el-table-column>
          <el-table-column label="收款类型" prop="ticket_type"></el-table-column>
          <el-table-column label="名称" prop="title"></el-table-column>
          <el-table-column label="金额" prop="money"></el-table-column>
          <el-table-column label="备注" prop="desc"></el-table-column>
          <el-table-column label="创建人" prop="username"></el-table-column>
          <el-table-column label="创建时间" prop="created_at"></el-table-column>
        </el-table>
      </fieldset>
    </el-footer>
  </el-container>
    </el-tab-pane>
  </el-tabs>

</template>

<script>
    import goback from "../common/goback";
    import {getSummaryDetail} from "@/apilist/Project"
    export default {
        name: "summaryDetail",
        data(){
            return {
                content:'',
                activeName: '1',
                baseinfo:{},
                summaryTotal:[],
                financeList: [],
                adminList:[],
                fpList:[],
                skList:[],
                financeRaw: 0,
                adminRaw: 0,
            }
        },
        components:{goback},
        methods: {
            //总计
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '合计';
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                   // if (!values.every(value => isNaN(value))) {
                      if(column.property == 'money'){
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        //sums[index] += '';
                    } else {
                        sums[index] = '';
                    }
                });

                return sums;
            },
          removeTab(){
            this.$router.push({
              path: '/tables',
              query: {
                tab: 0,
              },
            });
          },
        },
        mounted() {
            this.content = this.$route.query.name;
            let xmid = 0;
            xmid = this.$route.query.id;
            getSummaryDetail({xmid: xmid}).then(res => {
                this.baseinfo = res.data.baseinfo
                this.summaryTotal = res.data.summaryTotal
                this.financeList = res.data.financeList
                this.adminList = res.data.adminList
                this.fpList = res.data.fpList
                this.skList = res.data.skList
                this.financeRaw = this.financeList.length
                this.adminRaw = this.adminList.length

            })
        }
    }
</script>

<style scoped>
.legend{
  text-align: center;
  font-size: 20px;
  font-weight: 300;
  color: #666;
}
.layui-elem-field {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #e2e2e2;
}
.input90{
  width:90%;
}
.input80{
  width:80%;
}
.input95{
  width:95%;
}
.item {
  margin-top: 0px;
}

.is-fixed{
  top:23px !important;
  right:10px !important;
}

</style>
